<template>
	<view class="">
		<view class="tab">
			<u-sticky bgColor="#fff">
				<u-tabs :list="tabList" @click="tabClick" inactiveStyle="rgba(123, 123, 171, 1)" :activeStyle="{
			    color: '#000',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" lineColor="rgba(71, 71, 237, 1)"></u-tabs>
			</u-sticky>
		</view>
		<view class="order">
			<view class="order-item card" v-for="(item,index) in 5">
				<navigator url="/pages/order/detail" class="order-header">
					<view class="order-header-name">
						<view class="m-r-10">
							龙鼎汽修
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="order-header-name">
						合计：<span class="price"><span style="font-size: 28rpx;">¥</span>1999</span>
					</view>
				</navigator>
				<view class="order-content">
					<view class="goods">
						<!-- <view class="goods-item">
							<view class="goods-item-left">
								<view class="goods-item-img"></view>
								<view class="goods-item-info">
									<view class="goods-item-name">
										保养机油
									</view>
									<view class="goods-item-attr">
										<view class="">
											5W 40
										</view>
										<view class="m-l-10">
											库存12桶
										</view>
									</view>
									<view class="">
										<u-text mode="price" size="14" text="728732.32" :color="$u.color.priceColor">
										</u-text>
									</view>
								</view>
							</view>
							<view class="goods-item-right">
								<view class="goods-item-quan">
									x2
								</view>
							</view>
						</view> -->
						<view class="" style="display: flex;flex-direction: row;justify-content: space-between;">
							<view class="goods-scroll-left">
								<u-scroll-list :indicator="false">
									<view class="goods-scroll" v-for="(item, index) in 5" :key="index">
										<view class="goods-scroll-img"></view>
									</view>
								</u-scroll-list>
							</view>
							<view class="goods-scroll-right">
								<view class="goods-scroll-quan">
									x2
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="order-floor">
					<view class="order-floor-time">
						2022-10-10 15:20:12
					</view>
					<view class="">
						<u-button @click="sumbit()" text="服务中" shape="circle" size="mini"
							:customStyle="{padding:'30rpx 30rpx'}" :color="$u.config.linearColor">
						</u-button>
						<!-- <u-button @click="sumbit()" text="已取消" shape="circle" size="mini"
							:customStyle="{padding:'30rpx 30rpx',color:'rgba(153, 153, 153, 1)'}"
							color="rgba(245, 245, 245, 1)">
						</u-button> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '全部',
				}, {
					name: '服务中',
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}, {
					name: '待分享'
				}]
			}
		},
		methods: {
			tabClick(e) {
				console.log(e)
			},
		}
	}
</script>

<style lang="scss">
	.tab {
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.card {
		border-radius: $radius;
		box-shadow: $shadow;
		background: rgba(255, 255, 255, 1);
	}

	.price {
		color: $priceColor;
	}

	.goods {
		&-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 30rpx 0;

			&-left {
				display: flex;
				flex-direction: row;
			}

			&-img {
				width: 150rpx;
				height: 150rpx;
				background-color: #eee;
				border-radius: $radius;
				box-shadow: $shadow;
			}

			&-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 15rpx;
				font-size: 30rpx;
			}

			&-name {
				color: #000;
				font-weight: bold;
			}

			&-attr {
				display: flex;
				flex-direction: row;
				font-size: 24rpx;
				color: $u-light-color;
			}

			&-right {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: end;
			}

			&-quan {
				font-size: 24rpx;
				border-radius: 50%;
				border: 1rpx solid #eee;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		&-scroll {
			&-img {
				width: 150rpx;
				height: 150rpx;
				background-color: #eee;
				border-radius: $radius;
				box-shadow: $shadow;
				margin-right: 20rpx;
			}

			&-left {
				width: 90%;
			}

			&-right {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: end;
				width: 10%;
			}

			&-quan {
				font-size: 24rpx;
				border-radius: 50%;
				border: 1rpx solid #eee;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.order {
		&-item {
			margin: 30rpx;
		}

		&-header {
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			&-name {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 36rpx;
				font-weight: 500;
			}
		}

		&-content {
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			border-top: 1rpx solid #f5f5f5;
			min-height: 100rpx;
		}

		&-floor {
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			color: rgba(153, 153, 153, 1);

			&-time {
				font-size: 24rpx;
			}
		}
	}
</style>
